<template>
  <div style="position: relative;"> 
    <mt-header fixed title="头像修改">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div> 
    <div class="my-field" style="margin-top: 0;">
      <div class="my-field-img" @click='$router.push("/my/info/head")' >
        <img src="@/assets/img/head/male-2.png" ref="head" />
      </div>
    </div> 

    <div class="my-field" style="margin-top: 0;">
      <div class="my-field-img-wrap">
        <img src="@/assets/img/head/male-1.png"  @click='selImg' />
        <img src="@/assets/img/head/male-2.png"  @click='selImg' />
        <img src="@/assets/img/head/male-3.png"  @click='selImg' />
        <img src="@/assets/img/head/male-4.png"  @click='selImg' />
        <img src="@/assets/img/head/male-5.png"  @click='selImg' />
        <img src="@/assets/img/head/female-1.png"  @click='selImg' />
        <img src="@/assets/img/head/female-2.png"  @click='selImg' />
        <img src="@/assets/img/head/female-3.png"  @click='selImg' />
        <img src="@/assets/img/head/female-4.png"  @click='selImg' />
        <img src="@/assets/img/head/female-5.png"  @click='selImg' />
        <img src="@/assets/img/head/female-6.png"  @click='selImg' />
        <span @click='uploadHead' class="upload"><i>上传<br>头像</i></span>
        <!-- <img src="@/assets/img/head/female-7.png"  @click='selImg' />
        <img src="@/assets/img/head/female-8.png"  @click='selImg' /> -->
      </div>
    </div>
    <div style="display: flex; margin: 20px 10px;"><mt-button style="flex:1;" type="primary">确定修改</mt-button></div>

    <input type="file" ref="file" @change='selPic' accept="image/*" style="display:none;">
  </div>
</template>

<script>
export default { 
  data () {
    return { 
    }
  },
  mounted(){
    
  },
  methods:{
    selImg(e){
      this.$refs.head.src = e.target.src;
    },
    uploadHead(){
      this.$refs.file.click();
    },
    selPic(){
      var files = this.$refs.file.files[0];                  //获取文件信息
      var head = this.$refs.head; 
      if(files){ 
          var reader=new FileReader();                       //调用FileReader
          reader.onload=function(evt){                        //读取操作完成时触发。
            head.setAttribute('src',evt.target.result);    //将img标签的src绑定为DataURL
          }
          reader.readAsDataURL(files);                        //将文件读取为 DataURL(base64)
      }else{
        
      }
    }
  }
}
</script>
